<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>品牌与分类关系绑定 - 大电商后台管理系统</title>
    <link rel="icon" href="../../images/icon.png" type="image/ico">
    <meta name="keywords" content="大电商后台管理系统">
    <meta name="description" content="大电商后台管理系统">
    <meta name="author" content="yinqi">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <link href="../../css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../../css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="../../index.html"><img src="../../images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
                <!--
                        <a href="index.html" class = "logo">大电商后台管理系统</a>
                -->
            </div>
            <div class="lyear-layout-sidebar-scroll">
                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item active"> <a href="../../index.html"><i class="mdi mdi-home"></i> 后台首页</a> </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> 分类管理</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="../category/list.html">分类查询</a> </li>
                                <li> <a href="../category/add.html">添加分类</a> </li>
                                <li> <a href="../category/relation.html">分类与品牌关系绑定</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-collage"></i> 品牌管理</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="../brand/list.html">品牌列表</a> </li>
                                <li> <a href="../brand/add.html">添加品牌</a> </li>
                                <li> <a href="../brand/relation.html">品牌与分类关系绑定</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-camera-burst"></i> 商品属性管理</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="../property/list.html">商品属性列表</a> </li>
                                <li> <a href="../property/add.html">添加商品属性</a> </li>
                                <li> <a href="../property/relation.html">商品属性与分类关系绑定</a> </li>
                                <li> <a href="../specificaton/option.html">商品属性值管理</a> </li>
                                <li> <a href="../property/sku.html">商品属性值与SKU值绑定</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-calendar-text"></i> 商品规格管理</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="../specificaton/list.html">商品规格列表</a> </li>
                                <li> <a href="../specificaton/add.html">添加商品规格</a> </li>
                                <li> <a href="../specificaton/relation.html">商品规格与分类关系绑定</a> </li>
                                <li> <a href="../specificaton/option.html">商品规格值管理</a> </li>
                                <li> <a href="../specificaton/sku.html">商品规格值与SKU值关系绑定</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-folder-remove"></i> 商品SPU管理</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="../spu/list.html">商品SPU列表</a> </li>
                                <li> <a href="../spu/add.html">添加商品SPU</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-folder-star"></i> 商品SKU管理</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="../sku/list.html">商品SKU列表</a> </li>
                                <li> <a href="../sku/add.html">添加商品SKU</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-account"></i> 用户管理</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="../user/list.html">用户列表</a> </li>
                                <li> <a href="../user/add.html">添加用户</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-cube"></i> 用户收货地址管理</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="../address/list.html">用户收货地址列表</a> </li>
                                <li> <a href="../address/add.html">添加用户收货地址</a> </li>
                            </ul>
                        </li>
                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-thumb-up"></i> 用户点赞管理</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="../praise/list.html">用户点赞列表</a> </li>
                            </ul>
                        </li><li class="nav-item nav-item-has-subnav">
                        <a href="javascript:void(0)"><i class="mdi mdi-message"></i> 用户评论管理</a>
                        <ul class="nav nav-subnav">
                            <li> <a href="../comment/list.html">用户评论列表</a> </li>
                        </ul>
                    </li>

                    </ul>
                </nav>

                <div class="sidebar-footer">
                    <p class="copyright">Copyright &copy; 2021. <a target="_blank" href="http://lyear.itshubao.com">zzh</a> All rights reserved.</p>
                </div>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">

            <nav class="navbar navbar-default">
                <div class="topbar">

                    <div class="topbar-left">
                        <div class="lyear-aside-toggler">
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                            <span class="lyear-toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 品牌与分类关系绑定 </span>
                    </div>

                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-48 m-r-10" src="../../images/users/avatar.jpg" alt="zzh" />
                                <span>zzh <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li> <a href="lyear_pages_profile.html"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                                <li> <a href="lyear_pages_edit_pwd.html"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li> <a href="lyear_pages_login.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                        <li class="dropdown dropdown-skin">
                            <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
                            <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                                <li class="drop-title"><p>主题</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="site_theme" value="default" id="site_theme_1" checked>
                    <label for="site_theme_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                    <label for="site_theme_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                    <label for="site_theme_3"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>LOGO</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                    <label for="logo_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                    <label for="logo_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                    <label for="logo_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                    <label for="logo_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                    <label for="logo_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                    <label for="logo_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                    <label for="logo_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                    <label for="logo_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>头部</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
                    <label for="header_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                    <label for="header_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                    <label for="header_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                    <label for="header_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                    <label for="header_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                    <label for="header_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                    <label for="header_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                    <label for="header_bg_8"></label>
                  </span>
                                </li>
                                <li class="drop-title"><p>侧边栏</p></li>
                                <li class="drop-skin-li clearfix">
                  <span class="inverse">
                    <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
                    <label for="sidebar_bg_1"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                    <label for="sidebar_bg_2"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                    <label for="sidebar_bg_3"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                    <label for="sidebar_bg_4"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                    <label for="sidebar_bg_5"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                    <label for="sidebar_bg_6"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                    <label for="sidebar_bg_7"></label>
                  </span>
                                    <span>
                    <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                    <label for="sidebar_bg_8"></label>
                  </span>
                                </li>
                            </ul>
                        </li>
                        <!--切换主题配色-->
                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <form action="#!" method="post" class="row">
                                <div class="card-body">
                                    <div class="form-group col-md-12 has-feedback">
                                        <label for="brand-list" class="control-label">品牌名称</label>
                                        <select class="form-control" id="brand-list">
                                        </select>
                                        <label class="control-label"></label>
                                    </div>
                                    <div class="form-group col-md-12 has-feedback">
                                        <label for="category-list" class="control-label">分类名称</label>
                                        <select class="form-control" id="category-list">
                                        </select>
                                        <label class="control-label"></label>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <button type="button" id="save-btn" class="btn btn-primary " >保存</button>
                                        <button type="button" id="back-btn" class="btn btn-default" >返 回</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-fluid">

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="../../js/main.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="../../js/lightyear.js"></script>
<script type="text/javascript" src="../../js/http.js"></script>
<script type="text/javascript" src="../../js/public.js"></script>
<script>
    $(function () {
        var categoryList = $('#category-list');
        var brandList = $('#brand-list');
        var saveBtn = $('#save-btn');
        var backBtn = $('#back-btn');
        saveBtn.click(addRelation);
        backBtn.click(public.back);
        categoryList.blur(validRelation);
        saveBtn.addClass("disabled");
        loadBrandList();
        loadCategoryList();
        function loadBrandList() {
            http.get("api/brand/loadBrandList",{},function (data) {
                var list = data;
                for (var i = 0 ;i<list.length;i++){
                    var brand = list[i];
                    var option = `<option value="${brand.id}">${brand.name}</option>`
                    brandList.append(option)
                }
            })
        };
        function loadCategoryList() {
            http.get("api/category/loadCategoryList",{},function (data) {
                var list = data;
                for (var i = 0 ;i<list.length;i++){
                    var category = list[i];
                    var option = `<option value="${category.id}">${category.name}</option>`
                    categoryList.append(option)
                }
            })
        };
        function validRelation() {
            http.get("api/brand/validRelation",{
                brandId:brandList.val(),
                categoryId:categoryList.val()
            },function (data) {
                console.log(data)
                if (data == "0"){
                    //jquery中获取select中选中的值  $("#brand-list option:selected").text()
                    categoryList.next().text("该关系允许绑定");
                    brandList.parent().addClass('has-success');
                    brandList.parent().removeClass('has-error');
                    categoryList.parent().addClass('has-success');
                    categoryList.parent().removeClass('has-error');
                    saveBtn.removeClass("disabled");
                    saveBtn.addClass("success");

                } else{
                    //jquery中获取select中选中的值  $("#brand-list option:selected").text()
                    categoryList.next().text("该关系不允许重复绑定");
                    brandList.parent().addClass('has-error');
                    brandList.parent().removeClass('has-success');
                    categoryList.parent().addClass('has-error');
                    categoryList.parent().removeClass('has-success');
                    saveBtn.addClass("disabled");
                    saveBtn.removeClass("success");

                }
            })
            
        }
        function addRelation() {
            if (saveBtn.hasClass("disabled")){
                return;
            }
            http.post("api/brand/addRelation",{
                brandId:brandList.val(),
                categoryId:categoryList.val()
            },function (data) {
                //jquery中获取select中选中的值  $("#brand-list option:selected").text()
                lightyear.notify(`绑定关系 ${$("#brand-list option:selected").text()}----${$("#category-list option:selected").text()} 成功`,'success', 300, 'mdi mdi-emoticon-happy', 'top', 'center')
                saveBtn.addClass("disabled");
                saveBtn.removeClass("success");
            })

        }



    })
</script>
</body>
</html>